<template>
  <div class="swipe-setting lp-component-setting">
    <div class="setting-carousels">
      <draggable
        animation="300"
        :list="componentData.imageInfos"
      >
        <div v-for="(item,index) in componentData.imageInfos" :key="index" class="carousels-item">
          <el-row>
            <el-col :span="8">
              <div class="item-img">
                <el-upload
                  class="avatar-uploader"
                  :action="action"
                  :show-file-list="false"
                  :headers="{ token }"
                  :on-success="(res,file)=>{handleSuccess(res,file,index)}"
                >
                  <img v-if="item.image" :src="item.image" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </el-col>
            <el-col :span="14">
              <el-row>
                <el-col>
                  <div class="attr-name">链接类型：</div>
                  <el-radio-group v-model="item.linkType">
                    <el-radio :label="1">小程序页面</el-radio>
                    <el-radio :label="2">H5链接</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <template v-if="item.linkType === 1">
                    <el-input v-model="item.jumpLink" type="text" placeholder="请输入小程序页面路径" />
                  </template>
                  <template v-else>
                    <el-input v-model="item.jumpLink" type="text" placeholder="请输入H5链接地址" />
                  </template>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <el-row class="operator">
                <el-col>
                  <i class="el-icon-close" title="删除" @click="deleteImage(index)" />
                </el-col>
                <el-col>
                  <i class="el-icon-sort-up" title="上移" @click="moveImage(index,'pre')" />
                </el-col>
                <el-col>
                  <i class="el-icon-sort-down" title="下移" @click="moveImage(index,'next')" />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </draggable>
      <div class="carousels-add align-center" @click="addImageInfo">
        <div class="add-btn"><el-button type="primary" size="small" icon="el-icon-plus">添加轮播图片</el-button></div>
        <div class="tip-info"><i class="el-icon-warning" />图片上传支持jpg/jpeg/png/gif格式，最大不能超过1MB</div>
      </div>
      <el-card shadow="never">
        <el-row class="setting-item" type="flex" align="middle">
          <el-col class="item-name" :span="6">纵向滚动：</el-col>
          <el-col class="item-value" :span="18">
            <el-switch
              v-model="componentData.verticalScroll"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle">
          <el-col class="item-name" :span="6">自动滚动：</el-col>
          <el-col class="item-value" :span="18">
            <el-switch
              v-model="componentData.autoplay"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle" v-if="componentData.autoplay">
          <el-col class="item-name" :span="6">轮播间隔：</el-col>
          <el-col class="item-value" :span="18">
            <el-row type="flex" align="middle">
              <el-col :span="18">
                <el-slider v-model="componentData.autoplayDuration" :max="10000" :min="100" :show-tooltip="false" :step="100"></el-slider>
              </el-col>
              <el-col :span="6" class="value-right">{{componentData.autoplayDuration}}ms</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle">
          <el-col class="item-name" :span="6">循环切换：</el-col>
          <el-col class="item-value" :span="18">
            <el-switch
              v-model="componentData.loop"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle">
          <el-col class="item-name" :span="6">宽度：</el-col>
          <el-col class="item-value" :span="18">
            <el-row type="flex" align="middle">
              <el-col :span="18">
                <el-slider v-model="componentData.width" :show-tooltip="false"></el-slider>
              </el-col>
              <el-col :span="6" class="value-right">{{componentData.width}}px</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle" >
          <el-col class="item-name" :span="6">高度：</el-col>
          <el-col class="item-value" :span="18">
            <el-row type="flex" align="middle">
              <el-col :span="18">
                <el-slider v-model="componentData.height" :show-tooltip="false"></el-slider>
              </el-col>
              <el-col :span="6" class="value-right">{{componentData.height}}px</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle">
          <el-col class="item-name" :span="6">上边距：</el-col>
          <el-col class="item-value" :span="18">
            <el-row type="flex" align="middle">
              <el-col :span="18">
                <el-slider v-model="componentData.marginTop" :show-tooltip="false"></el-slider>
              </el-col>
              <el-col :span="6" class="value-right">{{componentData.marginTop}}px</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="setting-item" type="flex" align="middle" >
          <el-col class="item-name" :span="6">下边距：</el-col>
          <el-col class="item-value" :span="18">
            <el-row type="flex" align="middle">
              <el-col :span="18">
                <el-slider v-model="componentData.marginBottom" :show-tooltip="false" ></el-slider>
              </el-col>
              <el-col :span="6" class="value-right">{{componentData.marginBottom}}px</el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>

import { config } from '@/utils/config'
import { getToken } from '@/utils/auth'

export default {
  name: 'LpTextSetting',
  title: '文本设置',
  registerName: 'lp-text-setting',
  props: {
    componentData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      defaultImage: require('./images/blank.png'),
      action: config.uploadUrl,
      token: getToken()
    }
  },
  methods: {
    addImageInfo() {
      this.componentData.imageInfos.push({
        image: null,
        jumpLink: '',
        linkType: 1
      })
    },
    deleteImage(index) {
      if (this.componentData.imageInfos.length === 1) {
        return this.$message.error(`至少保留一项轮播图！`)
      }
      this.componentData.imageInfos.splice(index, 1)
    },
    /**
     *
     * @param index
     * @param direction pre next
     */
    moveImage(index, direction) {
      const temp = this.componentData.imageInfos[index]
      switch (direction) {
        case 'pre':
          if (index !== 0) {
            this.componentData.imageInfos.splice(index, 1)
            this.componentData.imageInfos.splice(index - 1, 0, temp)
          }
          break

        case 'next':
          if (index !== this.componentData.imageInfos.length - 1) {
            this.componentData.imageInfos.splice(index, 1)
            this.componentData.imageInfos.splice(index + 1, 0, temp)
          }
          break
      }
    },
    handleSuccess(res, file, index) {
      const imageInfo = this.componentData.imageInfos[index]
      imageInfo.image = res.data.url
      this.$emit('update:componentData', this.componentData)
    }
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

div {
  line-height: 30px;
}
.operator {
  text-align: right;
  color: #1890ff;
}
.align-center {
  text-align: center;
}
.add-btn {
  margin-top: 10px;
}
.tip-info {
  font-size: 12px;
}
.basic-info {
  margin-top: 40px;
}
.value-right {
  text-align: center;
}
.item-name {
  font-size: 14px;
  color: #000000;
}
</style>
